<template>
  <div class="variable">
    <div class="variable-title">变量列表</div>
    <el-scrollbar class="variable-list">
        <div class="variable-item" v-for="(item,index) in editorVariableList" :key="index" @click="handleClick(item)">{{ item.content }}</div>
    </el-scrollbar>
    <el-dialog
    title="替换变量"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    v-if="dialogVisible"
    append-to-body
    width="500px"
  >
    <div class="wrapper">
      <el-input v-model="inputVal" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
  </div>
</template>

<script>
import { checkBeforeInsert } from '@/utils/helpers.js'
import tinymce from 'tinymce'
export default {
    data () {
        return {
            editorVariableList:[],
            dialogVisible:false,
            info:{},
            inputVal: ''
        }
    },
    mounted(){
        this.getEditorVariableList()
    },
    methods: {
        getEditorVariableList(){
            const {select} = tinymce.activeEditor.dom
            this.editorVariableList = []
            select('[data-type*="variable_"]').forEach((node) => {
                const obj = this.editorVariableList.find(item => item.content === node.innerText && item.type === node.dataset.type)
                if(!obj && node.dataset.type !== 'variable_text' ){
                    this.editorVariableList.push({content: node.innerText,type:node.dataset.type})
                }
                
            })
        },
        autoReplace(val){
            const {select} = tinymce.activeEditor.dom
            select(`[data-type='${this.info.type}']`).forEach((node) => {
                if(node.innerText===this.info.content){
                    node.innerText = val
                }
            })
        },
        handleClick(item){
            if(item.type === 'variable_string'){
                const {select} = tinymce.activeEditor.dom
                select(`[data-type='${item.type}']`).forEach((node) => {
                    if(node.innerText === item.content){
                        node.innerText = node.innerText + '修改'
                    }
                })
            }else if(item.type === 'variable_formula'){
                 var baseURL =tinymce.baseURL + '/tinymce/plugins/kityformula/index.html'
                 const buttons = [{ type: 'cancel', text: 'Close' },{ type: 'custom', text: '保存', name: 'formula', primary: true }]
                tinymce.activeEditor.windowManager.openUrl({
                    title:'插入公式',
                    size: 'large',
                    width: 850,
                    height: 500,
                    url: baseURL,
                    buttons,
                    onAction: function (api, details) {
                        api.sendMessage('save')
                    }
                });
            }
            this.getEditorVariableList()
            // this.info = item
            // this.inputVal = ''
            // this.dialogVisible = true
        },
        handleClose(){
            this.dialogVisible = false
        },
        handleConfirm(){
            const {select} = tinymce.activeEditor.dom
            select(`[data-type='${this.info.type}']`).forEach((node) => {
                if(node.innerText===this.info.content){
                    node.innerText = this.inputVal
                }
            })
            this.getEditorVariableList()
            this.dialogVisible = false
        }
    }


}
</script>

<style scoped>
.variable-list{
    height: calc(100vh - 120px);
}
::v-deep .variable-list .el-scrollbar__wrap{
    overflow-x: hidden;
}
.variable-item{
    line-height:28px;
    cursor: pointer;
    color:#00f;
    padding-left: 16px;
}
</style>